<template>
  <div>
    <div v-if="!hasData" class="tips">暂无课程</div>
    <div class="sw" v-if="hasData">
      <div class="classeswrapper">
        <div class="classwrapper"  v-for="(item,index) in classinfo" :key="index">
            <div class="imgwrapper">
              <img :src="item.img" style="width:100%" />
            </div>
            <div class="title">{{item.title}}
            <div><span>已学{{item.speed}}% </span><el-divider direction="vertical"></el-divider><span> 用时{{item.time}}小时</span></div>
            </div>
            <div class="button">
              <router-link
                :to="{path:'/courseDetail',query:{ classNo: item.id }}"
              >
              <el-button round><span>继续学习</span></el-button>
              </router-link>
            </div>
        </div>
        <div class="block" v-show="pages!== 10">
          <el-pagination
            layout="prev, pager, next"
            :total="pages"
            :current-page.sync="currentPage"
            @current-change="changePage">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'pcClass',
  data () {
    return {
      classinfo: '',
      pages: 10,
      currentPage: 1,
      hasData: false
    }
  },
  mounted: function () {
    this.getData(1)
  },
  methods: {
    getData (page) {
      this.http.get(this.ports.personalCenter.member.class + '?page=' + page,
        res => {
          if (res.status === 200) {
            let data = res.data.result
            if (data.code === 200) {
              let length = data.msg.length
              let result = []
              for (let i = 0; i < length; i++) {
                result.push(
                  Object.assign({}, {id: data.msg[i].classNo},
                    {img: data.msg[i].classImg},
                    {title: data.msg[i].className},
                    {speed: data.study[i].studySpeed * 100},
                    {time: data.study[i].studyTime})
                )
              }
              this.classinfo = result
              this.pages = data.pages * 10
              this.hasData = true
            } else if (data.code === 1 || data.code === -1) {
              this.hasData = false
            }
          } else if (res.status === 401) {
            this.$router.push('/')
          } else {
            console.log(res)
          }
        })
    },
    changePage () {
      this.getData(this.currentPage)
    }
  }
}
</script>

<style lang="scss" scoped>
  .classwrapper {
    color: #93999f;
    font-size: 12px;
    margin-bottom: 0.5rem;
    display: flex;
    justify-content: flex-start;
  }
  .imgwrapper img {
    border-radius: 8px;
  }
  .imgwrapper {
    width: 180px;
    flex-shrink: 0;
    margin-right: 30px;
  }
  .title {
    line-height: 30px;
    font-size: 16px;
    font-weight: 700;
    color: #1c1f21;
    width: 300px;
    text-align: left;
    flex-shrink: 0;
    border-bottom: solid 1px #93999f;
  }
  .el-button{
    background-color: rgba(240,20,20,.6);
    color: #fff;
    border: solid 1px #fff;
    margin-top: 45px;
  }
  .title span{
    font-size: 14px;
    color: #5e5e5e;
    font-weight: 200;
  }
  .button{
    border-bottom: solid 1px #93999f;
  }
  .block{
    padding: 0;
    margin: 50px 0 100px 0;
    text-align: center;
  }
  .tips {
    margin-top: 100px;
    color: #5e5e5e;
  }
  .sw {
    margin-bottom: 100px;
  }
</style>
